<template>
  <div class="devicetypeconfig">
    <!-- -->
      <div class="con">
            <el-table id="demo"  border stripe v-loading="loading" :data="tableData" style="width: 100%" height="100%">
              <el-table-column type="index" width="80" label="序号" align="center">
              </el-table-column>
              <el-table-column prop="typeName" label="设备类型名称"> </el-table-column>
              <el-table-column prop="type" label="设备类型编号"> </el-table-column>
              <el-table-column prop="deviceSpecification" label="启动/禁用" align="center" width="400"> 
                   <template #default="{row}">
                            <div class="mysort">
                                <el-switch   v-model="row.isEnable"   active-color="#2178F1"   inactive-color="#CCCCCC" @change="switchfn(row)"> </el-switch>
                            </div>
                 </template>
              </el-table-column>
            </el-table>
      </div>
  </div>
</template>

<script>
  import { getAllDeviceTypeConfig,saveAllDeviceTypeConfig} from "../../api/gfSystem";
export default {
     data() {
        return {
            tableData:[],
            loading:false,
        }
     },
     mounted() {
       this.getList()
     },
     methods:{
         //获取表格数据
         getList(){
            this.loading = true
            getAllDeviceTypeConfig().then(res => {
                this.loading = false
                  if(res.code == 200){
                      var RESDATA = res.data
                      RESDATA.forEach(item => item.isEnable = item.isEnable == 1 ? true : false)
                      this.tableData = RESDATA
                  }else {
                      this.$message({showClose: true,message: '查询失败',type: 'error'});
                  }
            }).catch(() => {
                 this.loading = false
            })
         },
         //启用/禁用
         switchfn(row){
             var enableNum = row.isEnable ? 1 : 2
             var d = {
                "id": row.id,
                "type": row.type,
                "typeName": row.typeName,
                "code": row.code,
                "isEnable": enableNum
            }
            this.loading = true
            saveAllDeviceTypeConfig(d).then(res => {
                 this.loading = false
                 if(res.code == 200){
                    this.getList()
                    this.$message({showClose: true,message: enableNum == 1 ? '启用成功' : '禁用成功' ,type: 'success'});
                 }else {
                     this.$message({showClose: true,message: enableNum == 1 ? '启用失败' : '禁用失败' ,type: 'error'});
                 }
            }).catch(() => {
                this.loading = false
                 this.$message({showClose: true,message: enableNum == 1 ? '启用失败' : '禁用失败' ,type: 'error'});
            })

         },

     },
}

</script>
<style lang="scss" scoped>
    .devicetypeconfig {
        .con {
            width: 100%;
            height: 100%;
            padding: 12px;
            box-sizing: border-box;
            background-color: #fff;

        }
    }
</style>
